<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/home/categories' }"> 商品分类 </el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col>
        <el-button type="primary" style="margin: 20px 0" @click="showCategory">添加分类</el-button>
      </el-col>
    </el-row>

    <el-card>
      <!-- 使用树形表格 -->
      <zk-table :data="categoryList" :columns="columns" :selection-type="false" :expand-type="false" show-index index-text="#" border>
        <!-- 是否有效 -->
        <template slot="deleted" slot-scope="scope">
          <i class="el-icon-success" style="color: lightgreen; fontsize: 16px" v-if="scope.row.cat_deleted == false"></i>
          <i class="el-icon-error" style="color: red; fontsize: 16px" v-else></i>
        </template>
        <!-- 等级 -->
        <template slot="level" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level == 0">等级一</el-tag>
          <el-tag v-if="scope.row.cat_level == 1" type="success">等级二</el-tag>
          <el-tag v-if="scope.row.cat_level == 2" type="warning">等级三</el-tag>
        </template>
        <!-- 操作 -->
        <template slot="option">
          <el-button type="primary" size="mini">编辑</el-button>
          <el-button type="danger" size="mini">删除</el-button>
        </template>
      </zk-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[3, 5, 8, 10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 添加分类弹框 -->
      <el-dialog title="添加分类" :visible.sync="categoryVisible" @close="closeAddCategory" width="60%">
        <el-form :model="categoryInfo">
          <el-form-item label="分类名称" label-width="120px">
            <el-input v-model="categoryInfo.cat_name"></el-input>
          </el-form-item>
          <el-form-item label="选择分类" label-width="120px">
            <el-cascader v-model="selectedIds" :options="addCategoryList" :props="options" @change="handleChange" filterable clearable></el-cascader>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="categoryVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'categories',
  data() {
    return {
      queryInfo: {
        pagenum: 1,
        pagesize: 5,
      },
      // 存放分类列表
      categoryList: [],
      // 总条数
      total: 0,
      // 属性表格的columns
      columns: [
        {
          label: '商品分类',
          prop: 'cat_name',
          width: '400px',
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          minWidth: '200px',
          type: 'template',
          template: 'deleted',
        },
        {
          label: '等级',
          prop: 'cat_level',
          minWidth: '200px',
          type: 'template',
          template: 'level',
        },
        {
          label: '操作',
          minWidth: '200px',
          type: 'template',
          template: 'option',
        },
      ],
      // 控制添加分类弹窗的显示隐藏
      categoryVisible: false,
      // 添加分类需要的数据
      categoryInfo: {
        // 用户输入的分类名称
        cat_name: '',
        // 分类的父级ID
        cat_pid: 0,
        // 分类的等级
        cat_level: 0,
      },
      // 存放一级二级分类列表
      addCategoryList: [],
      // 选中项的id
      selectedIds: [],
      options: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        // 悬浮
        expandTrigger: 'hover',
        checkStrictly: true,
      },
    }
  },
  methods: {
    // 获取分类列表
    async getCategoryList() {
      const { data } = await this.$http.get('categories', {
        params: this.queryInfo,
      })
      this.categoryList = data.data.result
      this.total = data.data.total

      // vue-table-with-tree-grid
    },
    // 展示添加分类弹窗
    async showCategory() {
      // 获取一级二级分类的数据
      const { data } = await this.$http.get('categories', {
        params: {
          type: 2,
          pagenum: 1,
          pagesize: 100,
        },
      })
      this.addCategoryList = data.data.result
      this.categoryVisible = true
    },
    // el-select发生变化会触发的事件
    handleChange() {
      // console.log(this.selectedIds);
      // 证明级联选择器有选中
      console.log(this.selectedIds)
      if (this.selectedIds.length > 0) {
        // 将数组的最后一项作为当前添加分类的父级ID => cat_pid
        this.categoryInfo.cat_pid = this.selectedIds[this.selectedIds.length - 1]
        // 等级 = 数组的长度
        this.categoryInfo.cat_level = this.selectedIds.length
        console.log(this.selectedIds.length)
      } else {
        this.categoryInfo.cat_pid = 0
        this.categoryInfo.cat_level = 0
      }
    },
    // 点击确定 添加分类
    async addCategory() {
      const { data } = await this.$http.post('categories', this.categoryInfo)

      this.getCategoryList()
      this.categoryVisible = false
    },
    // 添加分类弹窗关闭时
    closeAddCategory() {
      this.selectedIds = []
      this.categoryInfo.cat_name = ''
      this.categoryInfo.cat_pid = 0
      this.categoryInfo.cat_level = 0
    },
    // 每页条数发生变化时
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCategoryList()
    },
    // 当前页发生变化时
    handleCurrentChange(newNum) {
      this.queryInfo.pagenum = newNum
      this.getCategoryList()
    },
  },
  created() {
    this.getCategoryList()
  },
}
</script>

<style lang="less">
.el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 10px;
}
.el-cascader-node__label {
  width: 157px;
}
.el-cascader-panel .el-radio__input {
  visibility: hidden;
}
.el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
.el-pagination {
  margin-top: 20px;
}
</style>
